<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-table :data="userlist"
              border
              style="width: 100%">
      <el-table-column prop="username"
                       label="姓名"
                       width="180">
      </el-table-column>
      <el-table-column prop="email"
                       label="邮箱"
                       width="180">
      </el-table-column>
      <el-table-column prop="mobile"
                       label="电话">
      </el-table-column>
      <el-table-column prop="role_name"
                       label="角色"
                       width="180">
      </el-table-column>
      <el-table-column prop="mg_state"
                       label="状态">
        <template slot-scope="scop">
          <el-switch v-model="scop.row.mg_state"
                     active-color="#13ce66"
                     inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="type"
                       label="操作"
                       width="180">
        <template slot-scope="scop">
          <el-row>
            <el-button icon="el-icon-search"
                       circle
                       @click="edit(scop.row.id)"></el-button>
            <el-button type="primary"
                       icon="el-icon-edit"
                       circle></el-button>
            <el-button type="danger"
                       icon="el-icon-delete"
                       circle></el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="queryparam.pagenumber"
                   :page-sizes="[1, 2, 3, 4]"
                   :page-size="queryparam.pagesize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'users',
  data () {
    return {
      userlist: [],
      queryparam: { pagenum: 1, pagesize: 10, query: '' },
      total: 0
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    async getUserList () {
      const { data: res } = await this.$http.get('users', { params: this.queryparam })
      this.userlist = res.data.users
      this.total = res.data.total
    },
    edit (id) {
      console.log(id)
    },
    handleSizeChange (pagesize) {
      this.queryparam.pagesize = pagesize
      this.getUserList()
    },
    handleCurrentChange (currentpage) {
      this.queryparam.pagenum = currentpage
      this.getUserList()
    }
  }
}
</script>

<style>
</style>
